<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: Lelouch
  Date: 2018/12/19
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>筛选查询</title>
</head>
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/util/jquerymania/js/select-mania.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/util/jquerymania/css/select-mania.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/util/jquerymania/css/themes/select-mania-theme-darkblue.css">
<script type="text/javascript">
    var columnIndex = 0;
    var operationIndex = 0;
    var linkIndex = 0;
    var index = 0;//最大行号
    var columnInfo = {'1': 'deptid', '2': 'deptname', '3': 'validflag', '4': '[Addtional Filter]'};
    var operationInfo = {'1': '包含', '2': '等于', '3': '大于', '4': '大于或等于'};
    var linkInfo = {'1': 'and', '2': 'or', '3': 'and not', '4': 'or not'};
    $(document).ready(function () {

    });

    function add() {
        columnIndex ++;
        operationIndex ++;
        //linkIndex ++;
        index ++;
        columnIndex = indexToStart(columnIndex, getLength(columnInfo));
        //operationIndex = indexToStart(operationIndex, getLength(operationInfo));
        //linkIndex = indexToStart(linkIndex, getLength(linkInfo));
        //参考Navicat operaion :默认是等于或者包含  linkInfo：默认是and
        linkIndex = 1;
        if(operationIndex > 2) {
            operationIndex = 1;
        }

        var div = "<div id='divRow_" + index + "'><input type='checkbox' name='row_" + index + "' id='row_" + index + "' checked='checked'/>";
        var column = "<a href='javascript:void(0)'>" + columnInfo[columnIndex] + "</a>&nbsp;&nbsp;" +
            "<input type='text' id='row_" + index + "_column' name='row_" + index + "_column' value='" + columnInfo[columnIndex] + "'/>";
        var operation = "<a href='javascript:void(0)'>" + operationInfo[operationIndex] + "</a>&nbsp;&nbsp;" +
            "<input type='text' id='row_" + index + "_operate' name='row_" + index + "_operate' value='" + operationInfo[operationIndex] + "'/>";
        var value = "<a href='javascript:void(0)'>&lt;?&gt;</a>&nbsp;&nbsp;"+
            "<input type='text' id='row_" + index + "_value' name='row_" + index + "_value' value='" + "?" + "'/>";
        var link =  "<a href='javascript:void(0)'>" + linkInfo[linkIndex] + "</a>&nbsp;&nbsp;" +
            "<input type='text' id='row_" + index + "_link' name='row_" + index + "_link' value='" + linkInfo[linkIndex] + "'/>";
        var space = "&nbsp;&nbsp;&nbsp;&nbsp;" +
            "<a id='row_" + index + "_delete' href='javascript:deleteRow(\"divRow_" + index + "\")'>删除</a>&nbsp;&nbsp;" +
            "<a id='row_" + index + "_space' href='javascript:spaceMove(\"row_" + index + "\")'>缩进</a>&nbsp;&nbsp;" +
            "<a id='row_" + index + "_spaceless' href='javascript:lessSpaceMove(\"row_" + index + "\")'>减少缩进</a>" +
            "<input type='text' value='0' name='row_" + index + "_1' id='row_" + index + "_1'/>";
        div = div + column + operation + value + link + space+ "</div>";
        $("#searchDiv").append(div);
        $("#maxRow").val(index);
    }
    //删除
    function deleteRow(id) {
        $("#" + id).remove();
        //删除之后将，删除行下面的所有行的行号都要减一
        var rowNum = id.split("_")[1];
        for(var i = (parseInt(rowNum) + 1); i <= index; i ++) {
            //div 修改id 和name
            $("#divRow_" + i).attr("id", "divRow_" + (i - 1));
            //checkbox  =====》必须先改name 再改id
            $("#row_" + i).attr("name", "row_" + (i - 1));
            $("#row_" + i).attr("id", "row_" + (i - 1));
            //column
            $("#row_" + i + "_column").attr("name", "row_" + (i - 1) + "_column");
            $("#row_" + i + "_column").attr("id", "row_" + (i - 1) + "_column");
            //operation
            $("#row_" + i + "_operate").attr("name", "row_" + (i - 1) + "_operate");
            $("#row_" + i + "_operate").attr("id", "row_" + (i - 1) + "_operate");
            //value
            $("#row_" + i + "_value").attr("name", "row_" + (i - 1) + "_value");
            $("#row_" + i + "_value").attr("id", "row_" + (i - 1) + "_value");
            //link
            $("#row_" + i + "_link").attr("name", "row_" + (i - 1) + "_link");
            $("#row_" + i + "_link").attr("id", "row_" + (i - 1) + "_link");
            //缩进
            $("#row_" + i + "_1").attr("name", "row_" + (i - 1) + "_1");
            $("#row_" + i + "_1").attr("id", "row_" + (i - 1) + "_1");
            //a标签
            $("#row_" + i + "_delete").attr("href", "javascript:deleteRow('divRow_" + (i - 1) + "')");
            $("#row_" + i + "_space").attr("href", "javascript:spaceMove('row_" + (i - 1) + "')");
            $("#row_" + i + "_spaceless").attr("href", "javascript:lessSpaceMove('row_" + (i - 1) + "')");
            $("#row_" + i + "_delete").attr("id", "row_" + (i - 1) + "_delete");
            $("#row_" + i + "_space").attr("id", "row_" + (i - 1) + "_space");
            $("#row_" + i + "_spaceless").attr("id", "row_" + (i - 1) + "_spaceless");

        }
        index --;
        $("#maxRow").val(index);
    }
    //缩进
    function spaceMove(id) {
        var rowNum = id.split("_")[1];
        if(rowNum == 1) {
            return;
        }
        var lastRowId = "row_" + (parseInt(rowNum) - 1) +  "_1";
        var value = $("#" + id + "_1").val();
        //因为删除的原因，可能上一行已经不存在了,获取最靠近的上一行
        var lastRowValue = "";
        for(var i = parseInt(rowNum) - 1; i > 0; i --) {
            var lastValue = $("#row_" + i + "_1").val();
            if(undefined != lastValue) {
                lastRowValue = lastValue;
                break;
            }
        }
        //只有当上一行的缩进值与本行相同时，才能进行缩进
        if("" != lastValue && value <= lastRowValue) {
            $("#" + id + "_1").val(parseInt(value) + 1);
            $("#" + id).before("<span>&nbsp;&nbsp;<span>");

        }
    }
    //减少缩进
    function  lessSpaceMove(id) {
        var rowNum = id.split("_")[1];
        var value = $("#" + id + "_1").val();//当前行缩进值
        if(rowNum == 1 || value <= 0) {
            return;
        }
        var lastValue = $("#row_" + (parseInt(rowNum) - 1) + "_1").val();//上一行缩进
        var num = 1;
        if(parseInt(value) - parseInt(lastValue) > 2) {
            num = parseInt(value) - parseInt(lastValue) - 1;
            $("#" + id + "_1").val(parseInt(lastValue) + 1);
        }else {
            $("#" + id + "_1").val(parseInt(value) - 1);
        }
        for(var i = 0; i < num; i ++) {
            if(0 != $("#" + id).prev("span").length) {
                $("#" + id).prev("span").remove();
            }
        }
        //下面所有子行都要进行减少缩进处理
        for(var j = parseInt(rowNum) + 1; j <= index; j ++) {
            var this_value = $("#row_" + j + "_1" ).val();
            var last_value = $("#row_" + (j - 1) + "_1").val();
            if(parseInt(this_value) <= value) {
                break;
            }
            var num_value = 1;
            if(parseInt(this_value) - parseInt(last_value) > 2) {
                num_value = parseInt(this_value) - parseInt(last_value) - 1;
                $("#row_" + j + "_1").val(parseInt(last_value) + 1);
            }else {
                $("#row_" + j + "_1").val(parseInt(this_value) - 1);
            }
            for(var k = 0; k < num_value; k ++) {
                if(0 != $("#row_" + j).prev("span").length) {
                    $("#row_" + j).prev("span").remove();
                }
            }
        }

    }
    function indexToStart(index, length) {
        if(index > length) {
            index = 1;
        }
        return index;
    }
    function getLength(obj){
        var count = 0;
        for(var i in obj){
            count++;
        }
        return count;
    }

    function submitForm() {
        $("#maxRow").val(index);
        $("#dataForm").submit();
    }
</script>
<body>
<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
<form id="dataForm" action="${pageContext.request.contextPath}/filterandsearch/saveFilterData.action" method="post" target="nm_iframe">
    <div id="searchDiv"></div>
    <a href="javascript:add()">&lt;添加&gt;</a>&nbsp;&nbsp;
    <a href="javascript:void(0)">&lt;上移&gt;</a>&nbsp;&nbsp;
    <a href="javascript:void(0)">&lt;下移&gt;</a>&nbsp;&nbsp;
    <a href="javascript:void(0)">&lt;应用&gt;</a>&nbsp;&nbsp;
    <br/> <br/>
    <input type="text" id="maxRow" name="maxRow" value=""/>
    <input type="button" onclick="submitForm()" value="提交" />
</form>
</body>
</html>
